import React, { Component } from 'react';
import { Card } from 'antd';
import echarts from 'echarts/lib/echarts'
import ReactEcharts from 'echarts-for-react';
import { joinDimensionField, formatterUnitOfData } from '@/utils/utils'
import styles from '../../../index.less'


export default class Doughnut extends Component {
  constructor() {
    super()
    this.state = {
      value: [],
      maxNumber: 2,
      minNumber: 1
    }
  }

  componentWillReceiveProps(nextProps) {
    const { data, staticts, params } = nextProps
    //params:{
    //   purpose: (6)["商品房", "住宅", "商业", "办公", "车位", "其他"]
    //   region: []
    //   staticts: (2)["面积", "套数"]
    //   __proto__: Object
    // }
    const value = []


    const result = joinDimensionField('new', params.staticts)//[new_square/new_area]
    const position = result[staticts]?result[staticts][0]:'new_square'//变量名

    data.map(item => {
      const obj = {}
      obj.name = item.age_class
      obj.value = item[position]
      value.push(obj)
    })

    console.log(value)
    const maxNumber = Math.max.apply(Math, value.map(item => { return item.value }))
    const minNumber = Math.min.apply(Math, value.map(item => { return item.value }))

    this.setState({
      value,
      maxNumber,
      minNumber
    })
  }

  getOption = (values, maxNumber, minNumber) => {
    const {staticts} = this.props
    let option = {
      // backgroundColor: '#2c343c',

      tooltip: {
        trigger: 'item',
        formatter: item => {
          const {value, unit} = formatterUnitOfData(staticts, item.value)
          const template = `
          <div class=${styles.tooltip}>
            <p>${item.name}</p>
            <div class=${styles.content}>
                <span class=${styles.circle} style="background: ${item.color}"></span>
                ${item.seriesName}:
                <span class=${styles.amount}>
                  ${value + unit}(${item.percent}%)
                </span>
            </div>
          </div>
          `
          return template
        }
      },

      visualMap: {
        show: false,
        min: minNumber,
        max: maxNumber,
        inRange: {
          color: ['#00ffc4', '#9c8ff5', '#5543ce']
        }
      },
      series: [
        {
          name: '物业类型',
          type: 'pie',
          radius: ['65%', '85%'],
          center: ['50%', '50%'],
          data: values.sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          label: {
            color: 'white',
            formatter: '{b}'
          },
          labelLine: {
            lineStyle: {
              color: 'white'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          },
          itemStyle: {
            color: '#1890ff',
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }
    return option
  }

  render() {
    const { value, maxNumber, minNumber } = this.state
    const { staticts } = this.props
    return (
      <>
        {value.length && <ReactEcharts style={{ height: '100%' }} option={this.getOption(value, maxNumber, minNumber)} theme="Imooc"
        />}
      </>
    )
  }
}
